import { Button, Drawer, Form, Input, Select, Space, TreeSelect } from "antd";
import { useSelector, useDispatch } from "react-redux";
import {
  changeCheckedKeys,
  changeEditAdmin,
  changeOpen,
  changeRole,
} from "../store/modules/admin";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import menus from "@/router/menus";
import getTereData from "../utils/getMenusTree";
import {
  // getAdminlist,
  // getAdminDetail,
  // addAdmin,
  // deleteAdmin,
  editAdmin,
} from "@/api/admin";
import { message } from "antd";
import store from "store2";
const DrawerEditAdmin = (props) => {
  const open = useSelector((state) => state.admin.open);
  const dispatch = useDispatch();
  //设置编辑框内初始数据
  const adminInfo = useSelector((state) => state.admin.editAdmin);
  const adminname = useSelector((state) => state.admin.adminname);
  //清除admin数据
  const clearInfo = () => {
    dispatch(
      changeEditAdmin({
        adminname: "",
        password: "",
        role: "1",
        checkedKeys: [],
      })
    );
  };
  //关闭抽屉
  const onClose = () => {
    dispatch(changeOpen(false));
    clearInfo();
  };

  //  提交修改数据
  const onEdit = () => {
    editAdmin(adminInfo).then((res) => {
      if (res.data.code === "200") {
        message.warning("修改管理员信息成功");
      } else {
        message.error("修改管理员信息失败");
      }
      onClose();
      props.update();

      if (adminname === adminInfo.adminname) {
        dispatch(changeRole(adminInfo.role));
        dispatch(changeCheckedKeys(adminInfo.checkedKeys));

        store.add("users", {
          role: adminInfo.role,
          checkedKeys: adminInfo.checkedKeys,
        });
      }
    });
  };

  //权限树的数据
  const treeData = getTereData(menus);

  return (
    <Drawer
      title="编辑"
      width={420}
      onClose={onClose}
      open={open}
      bodyStyle={{
        paddingBottom: 80,
      }}
      extra={
        <Space>
          <Button onClick={onClose}>取消</Button>
          <Button onClick={onEdit} type="primary">
            提交
          </Button>
        </Space>
      }
    >
      <Form
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 14,
        }}
        layout="horizontal"
        onValuesChange={() => {
          console.log("values change");
        }}
        size="default"
      >
        <Form.Item label="用户名">
          <Input
            disabled
            value={adminInfo.adminname}
            onChange={(e) => {
              dispatch(
                changeEditAdmin({ ...adminInfo, adminname: e.target.value })
              );
            }}
            allowClear
            placeholder="请输入用户名"
            prefix={<UserOutlined className="site-form-item-icon" />}
          />
        </Form.Item>
        <Form.Item label="密码">
          <Input
            disabled
            value={adminInfo.password}
            onChange={(e) => {
              dispatch(
                changeEditAdmin({ ...adminInfo, password: e.target.value })
              );
            }}
            allowClear
            placeholder="请输入密码"
            prefix={<LockOutlined className="site-form-item-icon" />}
          />
        </Form.Item>
        <Form.Item label="角色">
          <Select
            value={adminInfo.role}
            style={{
              width: 120,
            }}
            onSelect={(value) => {
              console.log(value);
              console.log(typeof value);
              dispatch(changeEditAdmin({ ...adminInfo, role: value }));
            }}
            options={[
              {
                value: "1",
                label: "管理员",
              },
              {
                value: "2",
                label: "超级管理员",
              },
            ]}
          />
        </Form.Item>
        <Form.Item label="权限">
          <TreeSelect
            value={adminInfo.checkedKeys}
            onChange={(value) => {
              // const newCheckedKeys = value.forEach((item, index) => {});
              dispatch(changeEditAdmin({ ...adminInfo, checkedKeys: value }));
            }}
            showSearch
            style={{
              width: "100%",
            }}
            dropdownStyle={{
              maxHeight: 400,
              overflow: "auto",
            }}
            placeholder="请选择权限"
            allowClear
            multiple
            treeDefaultExpandAll
            treeData={treeData}
            treeCheckable
          />
        </Form.Item>
      </Form>
    </Drawer>
  );
};
export default DrawerEditAdmin;
